import { useSystemStore } from "@/store";

/**
 * @description 自定义hooks，用于处理头部样式相关的计算属性
 * @returns {{
 *   headerContentStyle: Object, // 头部内容样式，包含导航栏高度
 *   headerStyle: Object, // 头部样式，包含安全区域样式和自动高度
 *   headerPlaceholderStyle: Object // 头部占位样式，包含状态栏和导航栏总高度
 * }} 返回包含各种头部样式的对象
 * */
export const useHooks = () => {
    /**
     * @description 系统 store
     * */
    const system = useSystemStore();

    /**
     * @description 计算头部内容样式，主要用于设置导航栏高度
     * */
    const headerContentStyle = computed(() => {
        return {
            height: `${system.navigationBarHeight}px`
        };
    });

    /**
     * @description 计算头部样式，合并安全区域样式并设置高度为自动
     * */
    const headerStyle = computed(() => {
        return {
            ...system.safeAreaStyle,
            height: "auto"
        };
    });

    /**
     * @description 计算头部占位样式，用于占位元素的高度设置，包含状态栏和导航栏的总高度
     * */
    const headerPlaceholderStyle = computed(() => {
        return {
            height: `${system.statusBarHeight + system.navigationBarHeight}px`
        };
    });

    return {
        headerContentStyle,
        headerStyle,
        headerPlaceholderStyle
    };
};

